<template>
  <div>
    <div id="clock">
      <h1>Gary</h1>
      <p class="date">{{ date }}</p>
      <p class="time">{{ time }}</p>
      <p class="text">数字时钟</p>
    </div>
  </div>
</template>
<script>
const week = [
  "星期天",
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六",
];

// setInterval(this.updateTime(), 1000);

export default {
  name: "clock",
  data() {
    return {
      time: "",
      date: "",
    };
  },
  methods: {
    updateTime() {
      var cd = new Date();
      this.time =
        this.zeroPadding(cd.getHours(), 2) +
        ":" +
        this.zeroPadding(cd.getMinutes(), 2) +
        ":" +
        this.zeroPadding(cd.getSeconds(), 2);
      this.date =
        this.zeroPadding(cd.getFullYear(), 4) +
        "-" +
        this.zeroPadding(cd.getMonth() + 1, 2) +
        "-" +
        this.zeroPadding(cd.getDate(), 2) +
        " " +
        week[cd.getDay()];
    },

    zeroPadding(num, digit) {
      var zero = "";
      for (var i = 0; i < digit; i++) {
        zero += "0";
      }
      return (zero + num).slice(-digit);
    },
  },
  created() {
    this.updateTime();
  },
  mounted() {
    setInterval(this.updateTime, 1000);
  },
};
</script>

<style scoped>
html,
body {
  height: 100%;
}

body {
  background: #c7c7c7;
}

p {
  margin: 0;
  padding: 0;
}

#clock {
  font-family: "Share Tech Mono", monospace;
  color: #ffffff;
  text-align: center;
  position: absolute;
  top: 300px;
  right: 0px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #333;
  text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
}
#clock .time {
  letter-spacing: 0.05em;
  font-size: 40px;
  padding: 5px 0;
}
#clock .date {
  letter-spacing: 0.1em;
  font-size: 24px;
}
#clock .text {
  letter-spacing: 0.1em;
  font-size: 12px;
  padding: 20px 0 0;
}
</style>